<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>管理员列表(全部的用户都在)</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <div class="mt-4">
    <el-input
    v-model="queryInfo.query"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="queryInfo.capacity" placeholder="Select" style="width: 115px">
          <el-option label="请选择" :value="0" />
          <el-option label="学生" value=1 />
          
          <el-option label="老师" value=2 />
          <el-option label="管理员" value=3 />
        </el-select>
      </template>
      <template #append>
        <el-button  @click="getUserList()"><el-icon><Search /></el-icon></el-button>
      </template>
    </el-input>
  </div>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
          </el-col>
        </el-row>
  
        <!-- 用户列表区域 -->
        <el-table :data="userlist" style="width: 100%" max-height="250" border>
           <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->
           <el-table-column type="index" label="#" width="60" />
           <el-table-column prop="user_id" label="学/工号" width="120" />
          <el-table-column prop="name" label="Name" width="120" />
          <el-table-column prop="password" label="password" width="160" />
          <el-table-column label="性别" width="60" >
            <template v-slot:default="scope">
              <span v-if="scope.row.sex === 0 ">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
          <el-table-column  label="手机号" width="120" >
            <template v-slot:default="scope">
              <span v-if="scope.row.phone === null ">无</span>
              <span v-else>{{scope.row.phone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="电子邮件" width="180" >
            <template v-slot:default="scope">
              <span v-if="scope.row.email === null ">无</span>
              <span v-else>{{scope.row.email}}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份" width="120" >
            <template v-slot:default="scope">
              <span v-if="scope.row.capacity === 1 ">学生</span>
              <span v-if="scope.row.capacity === 2 ">老师</span>
              <span v-if="scope.row.capacity === 3 ">管理员</span>

            </template>
          </el-table-column>
          <el-table-column prop="position" label="职称" width="120" />
         
          
          <el-table-column label="状态" width="80">
         
         <template v-slot:default="scope">
              <el-switch v-model="scope.row.statue" :active-value="1" :inactive-value="0" size="large"  width="60" @change="userStateChanged(scope.row)"/>
              <!-- 如果返回的不是数字类型的 就不用加冒号  active-value="1" 直接写  如果是数字类型的 就需要在前面加冒号-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot:default="scope">
              <!-- 修改按钮 -->
             
              <el-button type="primary" size="default" @click="selectDialog(scope.row.user_id)"><el-icon><EditPen /></el-icon></el-button>
         
              <!-- 删除按钮 -->
              <el-button type="danger"  size="default" @click="deleteUser(scope.row.user_id)"><el-icon><Delete /></el-icon></el-button>
              <!-- 分配角色按钮 -->
              
              <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                <el-button type="warning" size="default" @click="selectjueseDialog(scope.row.user_id)"><el-icon><Operation /></el-icon></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>
  
      <!-- 添加用户的对话框 -->
      <el-dialog title="添加用户" v-model="addDialogVisible" width="50%" @close="addDialogClosed" :visible.sync="addDialogVisible" >
        <!-- 内容主体区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
          <el-form-item label="学/工号" prop="user_id">
            <el-input v-model="addForm.user_id"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-switch v-model="addForm.sex" :active-value="1" :inactive-value="0" size="large" />
           默认为女
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="addForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="addForm.position"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="capacity">
            <el-select v-model="addForm.capacity" placeholder="状态" style="width: 115px">
          <el-option label="学生" value=1 />
          
          <el-option label="老师" value=2 />
          <el-option label="管理员" value=3 />
        </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="statue">
            <el-switch v-model="addForm.statue" :active-value="1" :inactive-value="0" size="large" /> 默认为无效
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closedia()">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>
       <!-- 修改用户的对话框 -->
       <el-dialog title="修改用户" v-model="updateDialogVisible" :rules="addFormRules" width="50%" :visible.sync="updateDialogVisible" >
        <!-- 内容主体区域 -->
        <el-form :model="ediitForm"  ref="updateFormRef" label-width="70px">
          <el-form-item label="学/工号" prop="user_id">
            
            <span>{{ediitForm.user_id}}</span>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ediitForm.password"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ediitForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-switch v-model="ediitForm.sex" :active-value="1" :inactive-value="0" size="large" />
           默认为女
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ediitForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="ediitForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="ediitForm.position"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="capacity">
            <el-select v-model="ediitForm.capacity" placeholder="状态" style="width: 115px">
          <el-option label="学生" :value="1" />
          
          <el-option label="老师" :value="2" />
          <el-option label="管理员" :value="3" />
        </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="statue">
            <el-switch v-model="ediitForm.statue" :active-value="1" :inactive-value="0" size="large" /> 默认为无效
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible =false">取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 更改角色 -->
      <!-- <el-dialog title="更改角色" v-model="updateCapacityDialogVisible"  width="50%" :visible.sync="updateCapacityDialogVisible" >

        <el-form :model="ediitForm"  ref="updateFormRef" label-width="70px">
          <el-form-item label="学/工号" prop="user_id">
            <span>{{ediitForm.user_id}}</span>
          </el-form-item>
        
          <el-form-item label="角色" prop="capacity">
            <el-select v-model="ediitForm.capacity" placeholder="状态" style="width: 115px">
          <el-option label="学生" value=1 />
          
          <el-option label="老师" value=2 />
          <el-option label="管理员" value=3 />
        </el-select>
          </el-form-item>
        </el-form>
   
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible =false">取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </span>
      </el-dialog> -->
    </div>
  </template>
  
  <script>
  export default {
    data() {
      // 验证邮箱的规则
      var checkEmail = (rule, value, cb) => {
        // 验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
  
        if (regEmail.test(value)) {
          // 合法的邮箱
          return cb()
        }
  
        cb(new Error('请输入合法的邮箱'))
      }
  
      // 验证手机号的规则
      var checkMobile = (rule, value, cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  
        if (regMobile.test(value)) {
          return cb()
        }
  
        cb(new Error('请输入合法的手机号'))
      }
  
      return {
        // 获取用户列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 2,
          //选择是学生还是管理员
          capacity:0
        },
        userlist: [],
        total: 0,
        // 控制添加用户对话框的显示与隐藏
        addDialogVisible: false,
        // 控制修改用户对话框的显示与隐藏
        updateDialogVisible:false,
        //更改角色
        updateCapacityDialogVisible:false,
        // 添加用户的表单数据
        addForm: {
          user_id: 0,
          password: '',
          name:'',
          sex:0,
          email: '',
          phone: '',
          position:'',
          capacity:1,
          statue:0
        },
        //查询到的信息
        ediitForm:[],
        // 添加表单的验证规则对象
        addFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {
              min: 3,
              max: 10,
              message: '用户名的长度在3~10个字符之间',
              trigger: 'blur'
            }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              min: 6,
              max: 15,
              message: '用户名的长度在6~15个字符之间',
              trigger: 'blur'
            }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      async getUserList() {
        const { data: res } = await this.$http.post('user_list',this.queryInfo
        )
        console.log(res)
        if (res === null) {
          return this.$message.error('获取用户列表失败！')
        }
        this.userlist = res
        // this.total = res.data.total
        console.log(this.userlist)
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getUserList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
      },
      // 监听 switch 开关状态的改变
      async userStateChanged(userinfo) {
        console.log(userinfo)
        const { data: res } = await this.$http.put(
          `user_statue/${userinfo.user_id}`
        )
        console.log(res)
        if (res !== 200) {
          userinfo.mg_state = !userinfo.mg_state
          return this.$message.error('更新用户状态失败！')
        }
        this.$message.success('更新用户状态成功！')
      },
      // 监听添加用户对话框的关闭事件
      addDialogClosed() {
        this.$refs.addFormRef.resetFields()
      },
      opendia(){
        this.addDialogVisible = true
      },
      closedia(){
        console.log(this.addDialogVisible)
        this.addDialogVisible = false
        console.log(this.addDialogVisible)
      },
      // 点击按钮，添加新用户
      addUser() {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('addUser', this.addForm)
  
          if (res !== 200) {
            this.$message.error('添加用户失败！')
          }
  
          this.$message.success('添加用户成功！')
          // 隐藏添加用户的对话框
          this.addDialogVisible = false
          // 重新获取用户列表数据
          this.getUserList()
        })
      },
      async deleteUser(user_id){
        if(confirm("你确认删除")){
          const { data: res } = await this.$http.put('deleteUser/'+user_id)
          if(res != 200){
            this.$message.error("删除失败")
          }
          this.$message.success('删除成功')
          this.getUserList()
        }
      },
      async selectDialog(user_id){
        console.log(user_id)
        const {data:res} = await this.$http.get('selectUser/'+user_id)
        if(res != null){
          this.ediitForm = res
          console.log(this.ediitForm)
          this.updateDialogVisible = true
        }
        

      },
      async updateUser(){
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('updateUser', this.ediitForm)
  
          if (res !== 200) {
            this.$message.error('修改用户失败！')
          }
  
          this.$message.success('修改用户成功！')
          // 隐藏添加用户的对话框
          this.updateDialogVisible = false
          // 重新获取用户列表数据
          this.getUserList()
        
      },
      selectjueseDialog(user_id){
        alert('尊贵的'+user_id+'该功能尚未开发')
      }
    }
  }

  </script>
  
  <style lang="less" scoped>
  </style>
  